<template>
  <view
    class="cat-item tap-active"
    @click="toDetail"
  >
    <!-- 区域图片 -->
    <u-image
      v-if="data.areaInfo.waitAdoptPic"
      :src="data.areaInfo.waitAdoptPic"
      mode="heightFix"
      width="100%"
      height="36rpx"
      :webp="true"
      class="area-pic"
    ></u-image>
    <!-- 是否为视频类型 -->
    <view
      v-if="data.file === 'video'"
      class="is-video flex-center"
    >
      <u-icon
        color="white"
        name="play-right-fill"
        size="16"
      />
    </view>
    <!-- 宠物图片 -->
    <maya-image
      :src="data.file.poster"
      :mode="imageSetting.mode"
      width="100%"
      :height="imageSetting.height"
      :webp="true"
      class="cat-pic"
      :lazy-load="true"
    ></maya-image>
    <!-- 宠物相关信息 -->
    <view class="cat-item--info">
      <view class="flex cat-base">
        <u--image
          :src="data.avatar"
          width="32rpx"
          class="user-avatar"
          height="32rpx"
          shape="circle"
        ></u--image>
        <text class="nick-name u-line-1">{{ data.nickName }}</text>
        <block
          v-for="(tag, index) in tags"
          :key="index"
        >
          <text class="tag">{{ tag }}</text>
        </block>
      </view>
      <!-- 领养情况 -->
      <view
        v-if="!!data.content"
        class="adopt-desc"
      >
        {{ data.content }}
      </view>
      <!-- 最近在吃的猫粮 -->
      <view
        v-if="!!data.goodsInfo"
        class="cat-goods"
      >
        {{ tips }}
        <text>{{ data.goodsInfo.goodsName }}</text>
        {{ unit }}
      </view>
    </view>
  </view>
</template>

<script>
// import mayaImage from '@/components/maya-image.vue';
export default {
  components: {
    // mayaImage,
  },
  props: {
    data: {
      type: Object,
      require: true,
    },
    // 指定了容器高度，用于处理懒加载时，图片没有进行占位，非必传
    width: {
      type: Number,
    },
  },
  data() {
    return {};
  },
  computed: {
    imageSetting() {
      const { width, height } = this.data.file;
      if (height / width > 1.5) {
        return {
          mode: 'aspectFill',
          height: '214px',
        };
      }
      if (this.width) {
        // 如果指定了宽度，则计算出高度
        return {
          mode: 'widthFix',
          height: this.width / (width / height),
        };
      }
      return {
        mode: 'widthFix',
        height: 'auto',
      };
    },
    tags() {
      let tags = [];
      const { varietyName, popularity, personality } = this.data;
      if (varietyName) {
        tags.push(varietyName);
      }
      // 每一种最多取三个
      const popularityArr = (popularity ? JSON.parse(popularity) : []).slice(
        0,
        3
      );
      const personalityArr = (personality ? JSON.parse(personality) : []).slice(
        0,
        3
      );
      if (popularityArr.length > 0) {
        tags = tags.concat(popularityArr.map((item) => item.value));
      }
      if (personalityArr.length > 0) {
        tags = tags.concat(personalityArr.map((item) => item.value));
      }
      return tags;
    },
    unit() {
      // 获取恶心的单位，因后端将提示文字合并成了一个文字，导致前端需要进行裁取单位出来显示
      if (!this.data.goodsInfo) {
        return false;
      }
      const { copyWriting, goodsName } = this.data.goodsInfo;
      return copyWriting.split(goodsName)[1];
    },
    tips() {
      // 宠物对应商品显示的前缀，因后端合并为一个字段，需要前端自行进行截取
      if (!this.data.goodsInfo) {
        return false;
      }
      const { copyWriting, goodsName } = this.data.goodsInfo;
      const index = copyWriting.indexOf(goodsName);
      return copyWriting.slice(0, index);
    },
  },
  methods: {
    toDetail() {
      uni.navigateTo({
        url: `/pages/detail/index?&id=${this.data.petId}`,
      });
    },
  },
};
</script>

<style lang="scss">
.cat-item {
  border-radius: $border-radius;
  overflow: hidden;
  background-color: white;
  margin-bottom: 16rpx;
  position: relative;
  min-height: 120rpx;
  .area-pic {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
  }
  .cat-pic {
    image {
      max-height: 214px !important;
    }
  }
  .is-video {
    position: absolute;
    right: 8rpx;
    top: 8rpx;
    z-index: 2;
    width: 34rpx;
    height: 34rpx;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 100%;
  }
  .cat-item--info {
    padding: 16rpx;
    .cat-base {
      flex-wrap: wrap;
      align-items: flex-start;
    }
    .nick-name {
      max-width: 80%;
    }
    .nick-name,
    .tag {
      flex-shrink: 0;
      margin: 0 4rpx;
    }
    .tag {
      background-color: $tag-bg-color;
      border-radius: calc($border-radius / 2);
      padding: 0 8rpx;
      margin-bottom: 12rpx;
    }
    .cat-goods {
      padding-top: 12rpx;
      text {
        color: $u-primary;
      }
    }
  }
  .adopt-desc {
    display: inline-block;
    color: $tag-light-text-color;
    border: 1px solid $tag-light-border-color;
    border-radius: calc($border-radius / 2);
    padding: 0 10rpx;
    font-size: 20rpx;
  }
}
</style>
